<template>
    <div class="file-item">
        <div class="info">
            <div class="filename" @click="previewHandler">
                {{data.filename}}
            </div>

            <i 
                v-if="!readonly && /del/.test(btnLayout)"
                class="el-icon-delete tool-item" 
                @click="delHandler"
            ></i>

            <i 
                v-if="/download/.test(btnLayout)"
                class="el-icon-download tool-item" 
                @click="downloadHandler"
            ></i>
        </div>

        <el-dialog 
        class="file-preview-dialog"
        :visible.sync="dialogVisible"
        :title="`附件预览：${data.filename}`"
        width="50%"
        :append-to-body="true"
        :close-on-click-modal="false"
        >
            <div 
            v-if="dialogVisible"
            class="pdf-con"
            >
                <pdf
                    class="dialog-preview"
                    :src="data.filesavepath"
                ></pdf>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        action: {
            type: Object,
            default: () => ({}),
        },
        size: {
            type: [String,Number],
            default: 178,
        },
        btnLayout: {
            type: String,
            default: ''
        },
    },
    inject: ['readonly'],
    data() {
        var that = this;
        
        return {
            dialogVisible: false,
        };
    },
    methods: {
        previewHandler() {
            this.dialogVisible = true;
            // window.open(`/plugin/pdfjs/index.html?file=${this.data.filesavepath}`);
        },
        downloadHandler() {
            downloader(this.data.filesavepath);
        },
        delHandler() {
            this.$emit('del', this.data);
        },
    }
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .file-item{
        overflow: hidden;
        position: relative;
        line-height: 33px;

        .info{
            overflow: hidden;
            text-overflow: ellipsis;
            
            .filename{
                display: inline;
                color: #3d7eff;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;

                &:hover{
                    color: #6497FE;
                }
            }

            .tool-item{
                font-size: 16px;
                color: $dangerColor;
                vertical-align: middle;
                margin-left: 5px;
                cursor: pointer;

                &:hover{
                    font-weight: bold;
                }
            }
        }
    }

    .file-preview-dialog {
        ::v-deep {
            .el-dialog__header{
                .el-dialog__title{
                    padding-right: 1em;
                    display: block;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }

            .el-dialog__body{
                padding: 0;
            }
        }

        .pdf-con{
            position: relative;
            height: 600px;
        }
    }

    .dialog-preview{
        max-width: 100%;
        max-height: 100%;
    }
</style>